<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="../elementUI.css">-->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../base.css">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-row style="margin-top: 30px;">
        <el-col :span="4" :offset="10">
            <h1>角色管理</h1>
        </el-col>
    </el-row>

    <el-table
            :data="model"
            style="width: 100%">

        <el-table-column
                prop="id"
                label="角色id"
                width="180">
        </el-table-column>

        <el-table-column
                prop="userId"
                label="用户id"
                width="180">
        </el-table-column>

        <el-table-column
                prop="name"
                label="角色名"
                width="180">
        </el-table-column>

        <el-table-column
                prop="manageId"
                label="后台管理员id"
                width="180">
        </el-table-column>

        <el-table-column
                prop="date"
                label="授权时间"
                width="180">
        </el-table-column>

        <el-table-column
                prop="effect"
                label="角色描述"
                width="180">
        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         width="120">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="del(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>

    </el-table>

    <el-row style="margin-top: 30px;">
        <el-col :span="2" :offset="22">
            <el-button type="primary" @click="addBox">添加</el-button>
        </el-col>
    </el-row>


    <el-dialog title="添加角色" :visible.sync="addDialogFormVisible">
        <el-form>
            <el-form-item label="角色" :label-width="formLabelWidth">
                <el-input v-model="name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="effect" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="授权用户" :label-width="formLabelWidth">
                <el-input v-model="userId" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<!-- 先引入 Vue -->
<script src="../vue.js"></script>
<!-- 引入组件库 -->
<script src="../elementUI.js"></script>
<!-- vue ajax插件 -->
<script src="../axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            model: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            edgeIndex: 0,
            addDialogFormVisible: false,
            name: "",
            effect: "",
            userId:""
        },
        created: function () {
            this.getData();
        },
        methods: {
            //获取类型
            getData() {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.get('http://39.105.59.232/manage/role').then(function (response) {
                    if (response.data.code == 200) {
                        that.model = response.data.data;
                    } else {
                        that.$alert("获取角色失败", "提示");
                    }
                })
            },

            //删除类型
            del(row, col) {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.delete('http://39.105.59.232/manage/role', {
                        data: {
                            id: col.id,
                        }
                    }
                ).then(function (response) {
                    if (response.data.code == 200) {
                        that.getData();
                    } else {
                        that.$alert("删除角色失败", "提示");
                    }
                })
            },
            //更改类型
            handleEdit(row, col) {
                this.edgeIndex = row;
                this.dialogFormVisible = true;
            },
            //添加box
            addBox() {
                this.addDialogFormVisible = true;
            },
            //添加
            add() {
                var that = this;
                axios.defaults.withCredentials = true;
                axios.post('http://39.105.59.232/manage/role',
                    {
                        name: that.name,
                        effect: that.effect,
                        userId:that.userId,
                        manageId:parent.v.user.username
                    }
                ).then(function (response) {
                    if (response.data.code == 200) {
                        that.getData();
                        that.addDialogFormVisible = false;
                    } else {
                        that.$alert("添加角色失败", "提示");
                    }
                })
            }

        }
    })
</script>
</html>